import {
    View,
    Text,
    StyleSheet,
    FlatList,
    FlatListProps,
    ActivityIndicator,
    Platform,
    RefreshControl, TouchableOpacity, Image, ScrollView
} from 'react-native'
import React, {Component} from 'react'
import {keyExtractor} from "../../util";
import {normalMarginEdge, primaryColor, primaryLightColor} from "../../style/constant";
import styles, {screenWidth} from "../../style";
import EmptyTip from "./EmptyTip";
import toast from "./ToastProxy";

interface CommonFlatListProps<T> extends FlatListProps<T> {
    refresh: () => void,
    loadMore: () => void,
}

interface CommonFlatListState {
    isRefresh: boolean;
    isRefreshing: boolean;
    showLoadMore: boolean;
    showRefresh: boolean;
}


export default class CommonFlatList extends Component<CommonFlatListProps<any>, CommonFlatListState> {

    flatList: FlatList<any>;

    constructor(props) {
        super(props);
    }

    state = {
        isRefresh: false,
        isRefreshing: false,
        showLoadMore: false,
        showRefresh: true,
    };


    /**
     * 绘制load more footer
     * */
    _renderFooter = () => {

        let footer = (this.state.showLoadMore) ?
            <View style={{
                flexDirection: 'row',
                justifyContent: 'center',
                alignItems: 'center'
            }}>
                <ActivityIndicator
                    color={primaryColor}
                    animating={true}
                    style={{height: 50, marginRight: 5}}
                />
                <Text style={{fontSize: 14, color: 'black'}}>
                    下拉加载更多...
                </Text>
            </View> : <View style={{
                flexDirection: 'row',
                justifyContent: 'center',
                alignItems: 'center'
            }}>
                <Text style={{fontSize: 14, color: 'black', margin: normalMarginEdge}}>
                    {this.props.data.length > 0 ? '已经到底了' : " "}
                </Text>
            </View>;

        return footer;
    };
    /**
     * 刷新
     * */
    _refresh = () => {
        if (this.state.isRefreshing) {
            return
        }
        this.setState({
            isRefreshing: true,
            showLoadMore: false,
            isRefresh: true,
        });
        this.props.refresh && this.props.refresh();
    };

    /**
     * 加载更多
     * */
    _loadMore = () => {
        if (this.state.isRefreshing) {
            return
        }
        if (!this.state.showLoadMore) {
            return
        }
        if (this.props.data.length === 0) {
            return
        }
        this.setState({
            isRefreshing: true,
            showRefresh: false,
        });
        this.props.loadMore && this.props.loadMore();
    };

    showRefreshState() {
        this.setState({
            isRefresh: true,
        });
    }

    scrollToTop() {
        if (this.flatList)
            this.flatList.scrollToOffset({offset: 0, animated: false});
    }

    refreshComplete(showLoadMore = false, scrollToTop = false) {
        this.setState({
            isRefreshing: false,
            isRefresh: false,
            showLoadMore: showLoadMore,
        });
        if (scrollToTop)
            this.scrollToTop();
    }

    loadMoreComplete(showLoadMore = false) {
        this.setState({
            isRefreshing: false,
            showRefresh: true,
            showLoadMore: showLoadMore,
        });
    }


    render() {
        let dataList = this.props.data;
        let refreshProps = {
            style: [styles.centered],
            refreshing: this.state.isRefresh,
            onRefresh: this._refresh,
            tintColor: primaryColor,
            title: "拼命加载中",
            colors: [primaryColor, primaryLightColor],
        };
        if ((!dataList || dataList.length === 0)) {
            if (!this.props.hasOwnProperty("renderHeader")) {
                if (Platform.OS === 'android') {
                    return (
                        <RefreshControl
                            {...refreshProps}
                            style={[styles.centered, styles.flex, this.props.style]}>
                            <TouchableOpacity style={[styles.centered, styles.absoluteFull]}
                                              onPress={() => {
                                                  this._refresh();
                                                  this.showRefreshState();
                                              }}>
                                <EmptyTip/>
                            </TouchableOpacity>
                        </RefreshControl>);
                } else {
                    return (
                        <View style={[styles.centered, styles.flex, this.props.style]}>
                            <TouchableOpacity style={[styles.centered, styles.absoluteFull, {zIndex: -999}]}
                                              onPress={() => {
                                                  this._refresh();
                                                  this.showRefreshState();
                                              }}>
                                <EmptyTip/>
                            </TouchableOpacity>
                            <ScrollView
                                style={{width: screenWidth, height: 10}}
                                refreshControl={
                                    <RefreshControl
                                        style={[styles.centered]}
                                        {...refreshProps}
                                    />
                                }>
                            </ScrollView>
                        </View>

                    );
                }
            }
        }
        return (
            <FlatList
                onEndReachedThreshold={.05}
                {...this.props}
                removeClippedSubviews={false}
                ref={flatList => this.flatList = flatList}
                refreshControl={
                    <RefreshControl
                        style={[styles.centered]}
                        {...refreshProps}/>}
                onEndReached={this._loadMore}
                ListFooterComponent={this.props.ListFooterComponent||this._renderFooter}
                data={dataList}
            />
        )
    }
}

const CommonFlatListStyle = StyleSheet.create({
    container: {}
});

 